<template>
    <div>
        <header id="header" class="aui-bar aui-bar-nav aui-bg-f" style="background-image: none">
            <a class="aui-pull-left" @click="fnStateBack">
                <span class="iconfont icon-fanhui aui-text-3"></span>
            </a>
            <!-- <div class="aui-title">极客登录</div>
            <div class="aui-pull-right" @click="fnOpenRegister">注册</div> -->
        </header>
        <div class="sign-pic aui-bg-f">
            <img src="../../assets/logo1.png" alt="">
        </div>
        <div class="sign-tab aui-bg-f">
            <div class="sign-tab-cnt">
                <div class="item" :class="{'active': active == 0 ? 'active' : ''}" @click="active = 0">
                    登录
                </div>
                <div class="item" :class="{'active': active == 1 ? 'active' : ''}" @click="active = 1">
                    注册
                </div>
            </div>
        </div>
        <ll :show="active == 0 ? true : false"></ll>
        <register :show="active == 1 ? true : false"></register>
    </div>
</template>
<script>
  import login from "../../service/sign.js"
  import ll from './components/login.vue'
  import register from './components/register.vue'
    export default {
      components: {
          ll,
          register
      },
        data () {
            return {
                active: 0
            }
        },
        mounted () {
            this.active = this.$route.query.active ? this.$route.query.active : 0;
        },
        methods: {
            fnStateBack: function() {
				if (this.$route.query.from == 'login') {
					this.utils.fnOpenCommon(this, {name: 'home'})
				} else {
					this.back()
				}
			}
        }
    }
</script>

<style lang="scss" scoped>
    .sign-pic {
        padding: 20px 0;
        img {
            display: block;
            margin: 0 auto;
        }
    }
    .sign-tab {
        padding: 48px 0 38px;
        .sign-tab-cnt {
            border-radius: 24px;
            margin: 0 auto;
            position: relative;
            width: 270px;
            height: 40px;
            box-shadow: 0 0 4px #b3b3b3;
            font-size: 17px;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            justify-content: center;
            .item {
                &:nth-child(2) {
                    padding-left: 9px;
                }
                text-align: center;
                width: 134px;
                position: relative;
                z-index: 9;
                height: 100%;
                box-sizing: border-box;
                line-height: 40px;
            }
            .item.active {
                color: #fff;
                background-color: var(--pink)!important;
                border-radius: 24px;
            }
        }
        

    }
   
</style>
